<template>
    <div class="register-wrapper">
        <Icon name="close" class="close" @click.native="$emit('close')"></Icon>
        <h2>登陆你的头条，精彩永不消失</h2>
        <div class="input username">
            <input type="text" placeholder="用户名随便填" v-model="username">
            <span :class="{'animate': username_msg}">{{username_msg}}</span>
        </div>
        <div class="input password">
            <input type="password" placeholder="密码: 123456" v-model="password">
            <span :class="{'animate': password_msg}">{{password_msg}}</span>
        </div>
    </div>
</template>
<script>
    import axios from 'axios'

    let flag = 0
    export default {
        data() {
            return {
                username: '',
                username_msg: '',
                password: '',
                password_msg: ''
            }
        },
        methods: {
            login() {
                if (!this.username) {
                    this.username_msg = '请输入用户名'
                } else {
                    this.username_msg = ''
                }
                if (this.username_msg) return

                if (!this.password) {
                    this.password_msg = '请输入密码'
                } else {
                    this.password_msg = ''
                }
                if (this.password_msg) return


                axios.post('http://localhost:8081/api/user/register',
                    {
                        "userName": this.username,
                        "userPassword": this.password
                    }
                ).then(function (dat) {
                    if (dat.data == '0') {
                        alert("用户不存在")
                    } else if (dat.data == '1') {
                        alert("登录失败，账号或密码错误")
                    } else if (dat.data == '2') {
                        flag = 1;
                    }
                }).catch(function () {
                    console.log("传输失败")
                })

                if (flag == 1) {
                    this.$showLoading();
                    try {
                        this.$store.dispatch('login', {
                            username: this.username,
                            password: this.password
                        })
                    } catch (e) {
                    }
                    this.$hideLoading();

                    this.$set(this.$store.state.user.footerBarList, 3, {
                        title: '我的',
                        icon: 'account1',
                        path: '/account'
                    })
                    this.$emit('close');
                    let avatar = require('assets/images/avatar.png');
                    this.Cookie.set('username', this.username);
                    this.Cookie.set('avatar', avatar);
                    this.$store.state.app.user.name = this.username;
                    this.$store.state.app.user.avatar = avatar;
                    this.$emit('close');
                }
            }
        }
    }
</script>
<style lang="less" scoped>
    .register-wrapper {
        position: fixed;
        width: 100%;
        height: 100%;
        left: 0;
        top: 100%;
        z-index: 1000;
        opacity: 0;
        background-color: #fff;
        border-top-right-radius: 0.05rem;
        border-top-left-radius: 0.05rem;
        text-align: center;
        transition: top .2s ease-out;

        .close {
            position: absolute;
            right: 0rem;
            top: 0rem;
            font-size: 0.2rem;
            width: 0.4rem;
            height: 0.4rem;
            padding: 0.1rem;
            color: #555;
        }

        h2 {
            margin: 0.3rem 0;
            color: #333;
            font-size: 0.2rem;
            text-align: center;
        }

        .input {
            width: 80%;
            height: 0.4rem;
            margin: 0 auto;
            margin-bottom: 0.3rem;
            position: relative;

            span {
                position: absolute;
                left: 0.15rem;
                top: 0.45rem;
                font-size: 0.1rem;
                color: @theme-red;
                opacity: 0;
            }

            .animate {
                opacity: 1;
                animation: swing .5s linear;
            }

            @keyframes swing {
                10% {
                    transform: translateX(-0.06rem);
                }

                30% {
                    transform: translateX(0.06rem);
                }

                50% {
                    transform: translateX(-0.06rem);
                }

                70% {
                    transform: translateX(0.06rem);
                }
                80% {
                    transform: translateX(-0.04rem);
                }
                90% {
                    transform: translateX(0.04rem);
                }

                100% {
                    transform: translateX(0rem);
                }
            }
        }

        input {
            border: 1px solid #ccc;
            border-radius: 0.2rem;
            width: 100%;
            height: 100%;
            text-indent: 0.15rem;
            outline: none;
            font-size: 0.14rem;
            color: #333;
        }

        .login {
            margin-top: 0.2rem;
            width: 80%;
            height: 0.4rem;
            border-radius: 0.2rem;
            line-height: 0.4rem;
            color: #f4f4f4;
            border: none;
            background-color: @theme-bg-red;
        }

        .register {
            margin-top: 0.2rem;
            width: 80%;
            height: 0.4rem;
            border-radius: 0.2rem;
            line-height: 0.4rem;
            color: #f4f4f4;
            border: none;
            background-color: @theme-bg-red;
        }
    }
</style>
